<template>
    <div class="page">
        <div v-for="todo in todos" 
            :key="todo.id" 
            :class="['todo']"
        >
            <input type="checkbox" 
                @click="todo.completed = !todo.completed"
                :checked="todo.completed"
            />
            <label>{{todo.content}}</label>
            <button class="del" @click="del(todo.id)">X</button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        todos: {
            type: Array,
            required: true
        }
    },
    methods: {
        del(id){
            this.$emit('del', id)
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../styles/item.scss'
</style>

